<template>
	<div class="v-unlock">
		<div id="drag"></div>
		<span style="display: none" v-on:click="unlock()"></span>
	</div>
</template>

<script>
	import $ from 'jquery';
	import '../custom/drag.js';
	export default {
		data() {
				return {
					unlock_tag: false,
				};
			},
			methods: {
				unlock() {
					this.unlock_tag = true;
					this.$emit('unlock_tag', true)
				}
			},
			mounted() {
				$('#drag').drag();
			}
	};
</script>

<style lang="scss">
	.v-unlock {
		border: 1px solid #CBCBCB;
		border-radius: 2px;
		.main {
			width: 412px;
			height: 45px;
			background: #E5E5E5;
			img {
				height: 45px;
				background: white;
				vertical-align: baseline;
			}
		}
		,
		#drag {
			position: relative;
			background-color: #e8e8e8;
			width: 412px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			pointer-events: none;
		}
		#drag .handler {
			position: absolute;
			top: -1px;
			left: 0px;
			width: 40px;
			height: 46px;
			border: 1px solid #ccc;
			cursor: move;
			pointer-events: auto;
		}
		.handler_bg {
			background: #fff url("") no-repeat center;
		}
		.handler_ok_bg {
			background: #fff url("") no-repeat center;
		}
		#drag .drag_bg {
			background-color: #7ac23c;
			height: 45px;
			width: 0px;
		}
		#drag .drag_text {
			position: absolute;
			top: 0px;
			width: 412px;
			-moz-user-select: none;
			-webkit-user-select: none;
			user-select: none;
			-o-user-select: none;
			-ms-user-select: none;
		}
	}
</style>